Paginación con barra de scroll

Con anterioridad mostraba un widget para añadir paginación, esta vez el tema también trata sobre paginación pero los estilos son distintos y en lugar de mostrar los cuadritos de navegación nos muestra una línea con efecto scroll, atrás quedó también el texto "Pages"que tantos tuvieron que modificar para perderlo de vista. Y según cuenta su autor Abu Farhan ha conseguido algo muy importante que su funcionamiento vaya más allá de los 500 post.

Justo antes de ]]></b:skin> añadimos los estilos:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%;height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Buscamos </body> al final de la plantilla y justo antes añadimos:

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

En "var postperpage" es el número de post que mostramos por página, debe coincidir con el número a mostrar que tenemos en Configuración.
Donde "var numshowpage" será la cantidad de números que mostramos en cada página.

Modificaciones que podemos hacer respecto al color.

- La línea de color la podemos cambiar en background de "paginator .current_page_mark"
- Así como el de background de "paginator span strong" para la numeración de la página donde nos encontramos.
-El color de la numeración en "paginator span"
- La línea gris en "paginator .scroll_trough"
- Hay una imagen en los estilos que recomiendo descargar y alojar en otro sitio para asegurarnos que no la vamos a perder, la imagen es la siguiente y la url la podemos sustituir por la nuestra en los estilos donde dice:

http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif

- Hay un detalle que tenemos que tener en cuenta, al final del script que añadimos veremos que hay otro script es conveniente descargarlo porque si algún día la banda ancha del sitio donde se encuentra fuera superada nos encontraremos que el script no funcionará.

Podemos pegar la siguiente dirección en la barra del navegador y descargar el script a nuestro PC para luego proceder a subirlo a nuestro alojamiento.

http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js

- Podemos ver un ejemplo de Abu Farhan y mi ejemplo.